<template>
	<!-- 邀约大厅 -->
	<view class="content">
		<view class="top-bar">
			<view class="shenqing btn" @click="gotoShenqingList()">
				申请
			</view>
			<view class="mine btn" @click="gotoMineView()">
				我的
			</view>
		</view>
		<view class="no-user-title-box" v-if="!yuyueList[0]">
			<view class="item">
				当前没有邀约呢，要不要发起一个呢~
			</view>
		</view>
		<view class="message-box" v-if="yuyueList[0]">
			<view class="item" v-for="(item,index) in yuyueList" :key="index" @click="gotoUserInput(item.conversation_id)">
				<view class="name">
					{{item.zhaomu_name}}
				</view>
				<view class="yaoyue">
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="gotoCreateYaoyue()">
				我也要发起邀约
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		getZhaomuList
	} from '@/api/yaoyue_api.js'

	const changuanid = ref('')
	const yuyueList = ref([])
	const openid = ref('')

	const _getZhaomuList = (id,openid) => {
		getZhaomuList(id,openid).then((res) => {
			console.log(id,openid);
			yuyueList.value = res.result
			
			if (res.result == '未实名无法使用。' ) {
				uni.showModal({
					title:'提示',
					content:'请先去实名认证一下吧~'
				})
			}
			console.log(res);
		})
	}


	// 跳转创建邀约
	const gotoCreateYaoyue = () =>{
		let id = changuanid.value
		uni.navigateTo({
			url:`/pages/changdi_view/yaoyue-model/create-yaoyue?id=${id}`
		})
	}
	
	// 跳转输入框
	const gotoUserInput = (id) => {
		uni.navigateTo({
			url:`/pages/changdi_view/yaoyue-model/shenqing-input-view?id=${id}`
		})
	}
	
	// 跳转我的
	const gotoMineView = () => {
		let id = changuanid.value
		uni.navigateTo({
			url:`/pages/changdi_view/yaoyue-model/my-yaoyue-view?id=${id}`
		})
	}
	
	// 跳转申请列表
	const gotoShenqingList = () => {
		uni.navigateTo({
			url:`/pages/changdi_view/yaoyue-model/shenqing-list-view`
		})
	}

	onLoad((option) => {
		changuanid.value = option.changdiid
		console.log(option);
		uni.getStorage({
			key:'openid',
			success(res) {
				_getZhaomuList(option.changdiid,res.data.openid)
				openid.value = res.data.openid
			}
		})
		
	})
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f5f5f6;
		min-height: 100vh;
		
		.top-bar {
			padding: 20rpx ;
			display: flex;
			justify-content: flex-end;
			.btn {
				padding: 30rpx;
				background-color: #53c3ff;
				color: white;
				margin-left: 20rpx;
				border-radius: 10rpx;
			}
		}
		.no-user-title-box {
			min-height: 100vh;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: center;
		}
		.message-box {
			padding-top: 20rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-bottom: 100rpx;
			.item {
				padding: 40rpx;
				border-radius: 20rpx;
				background-color: white;
				margin-bottom: 20rpx;
			}
		}
		.btn-box {
			padding: 0rpx 40rpx 40rpx 40rpx;
			position: fixed;
			bottom: 0;
			.btn {
				width: calc(100vw - 80rpx);
				text-align: center;
				padding: 40rpx 0;
				background-color:#53c3ff ;
				border-radius: 20rpx;
				color: white;
			}
		}
	}
</style>